<template>
  <div class = "right">
    <!--个人信息-->
    <el-popover
        placement = "bottom"
        popper-class = "clear-padding"
        :width = "300"
        trigger = "click"
    >
      <template #reference>
        <div v-show = "showPersonInfo" class = "person-info">
          <router-link to = "/" class = "head-img">
            <el-avatar :size = "30" :src = "logo" />
          </router-link>
          <a href = "javascript:">你的名字</a>
          <i-down theme = "outline" size = "15" :fill = "props.textColor" />
        </div>
      </template>
      <!--粉丝数量-->
      <el-row style = "padding: 10px 0">
        <el-col>
          <base-fans-numbers :fans = "123" :post = "321" :focus = "111" />
          <div class = "column-center-container">
            <el-button>签到</el-button>
          </div>
        </el-col>
      </el-row>
      <!--个人设置和退出登录-->
      <el-row>
        <el-col>
          <ul>
            <li class = "my-setting">
              <i-smiling-face-with-squinting-eyes theme = "outline" size = "14" fill = "#808080" :strokeWidth = "3"
                                                  strokeLinejoin = "miter" />
              我的会员
            </li>
            <li class = "my-setting">
              <i-smiling-face-with-squinting-eyes theme = "outline" size = "14" fill = "#808080" :strokeWidth = "3"
                                                  strokeLinejoin = "miter" />
              个人信息设置
            </li>
            <li class = "my-setting">
              <i-logout theme = "outline" size = "14" fill = "#808080" :strokeWidth = "3" strokeLinejoin = "miter" />
              退出登录
            </li>
          </ul>
        </el-col>
      </el-row>
    </el-popover>
    <!--换肤、设置-->
    <div class = "operate">
      <!--换肤-->
      <el-popover
          placement = "bottom"
          :width = "390"
          trigger = "click"
      >
        <template #reference>
          <i-clothes-crew-neck theme = "outline" size = "18" :fill = "props.textColor" :strokeWidth = "2" />
        </template>
        <ul class = "row-container color-ul">
          <el-space wrap :size = "10">
            <li @click = "setTheme(item)" class = "color-li" :style = "{backgroundColor:colorArr[index]}"
                v-for = "(item,index) in colorArr"
                :key = "item">

            </li>
          </el-space>
        </ul>
      </el-popover>
      <!--设置-->
      <i-config theme = "outline" size = "20" :fill = "props.textColor" :strokeWidth = "2" />
      <i-bill theme = "outline" size = "17" :fill = "props.textColor" :strokeWidth = "2" />
      <!--消息-->
      <i-mail theme = "outline" size = "15" :fill = "props.textColor" :strokeWidth = "2" />
    </div>
    <div style = "padding: 0 15px">|</div>
    <!--最小化-->
    <div class = "operate">
      <i-minus theme = "outline" size = "25" :fill = "props.textColor" :strokeWidth = "3" />
      <i-rectangle-one theme = "outline" size = "15" :fill = "props.textColor" :strokeWidth = "3" />
      <i-close @click = "closeWindow" theme = "outline" size = "15" :fill = "props.textColor" :strokeWidth = "3" />
    </div>

  </div>
</template>

<script setup>
import logo from '@/assets/logo.png'
import {reactive} from "vue";
import store from "@/store";
import BaseFansNumbers from "@/components/Base/BaseFansNumbers";

const props = defineProps({
  textColor: {
    type: String,
    default: function () {
      return '#808080'
    }
  },
  showPersonInfo: {
    type: Boolean,
    default: function () {
      return true
    }
  }
})
const colorArr = reactive(["#F4F4F4", "#062790", "#1aaac6", "#4aaf68", "#a6cae1", "#c153c2", "#8a9c17", "#08aaef", "#c22e57", "#b7f7cd", "#b7f7cd", "#b7f7cd"])

//变换主题色
function setTheme(headerColor) {
  //如果颜色为 #fff 就去Vuex变化header字体颜色为#000。如果不是，字体颜色就变回#fff
  document.body.style.setProperty('--main-color', headerColor);
  document.body.style.setProperty('--main-color-background', headerColor + '1A');
  //变换到白色主题
  if (headerColor === '#F4F4F4') {
    document.body.style.setProperty('--slider-button-color', '#FD544E');
    document.body.style.setProperty('--slider-button-color-background', '#FD544E1A');
    return store.commit('UserInterface/CHANGETEXTCOLOR', '#000')
  }  //变换到非白色主题
  document.body.style.setProperty('--slider-button-color', headerColor);
  document.body.style.setProperty('--slider-button-color-background', headerColor + '1A');
  store.commit('UserInterface/CHANGETEXTCOLOR', '#fff')
}

//关闭页面
function closeWindow() {
  store.commit('UserInterface/SWITCHPROJECT')
}
</script>

<style lang = "less" scoped>
.right {
  display: flex;
  color: white;
  align-items: center;

  .person-info {
    display: flex;
    align-items: center;

    a {
      color: v-bind('props.textColor')
    }

    .head-img {
      height: 100%;
      display: flex;
      align-items: center;
    }

    > * {
      padding: 0 4px;
      cursor: pointer;
    }

    > *:hover {
      opacity: .5;
      transition: all .2s;
    }
  }


  .operate {
    display: flex;
    align-items: center;

    > * {
      padding: 0 10px;
      cursor: pointer;
    }

    > *:hover {
      opacity: .5;
      transition: all .2s;
    }
  }

}

.color-ul {
  flex-wrap: wrap;

  .color-li {
    display: flex;
    width: 50px;
    height: 50px;
    border: 1px solid black;
  }
}

.my-setting {
  cursor: pointer;
  line-height: 40px;
  height: 40px;
  padding: 0 30px;

  &:hover {
    background-color: rgba(128, 128, 128, .35);
  }
}


</style>